<template>
  <div class="w-[200px] bg-[var(--headBg)] h-[100%] pt-2">
    <div v-for="(item, index) in aisdeMenuCommon" :key="index" @click="gotoRouter(item)">
      <div
        v-if="!item.type"
        class="flex h-[50px] items-center px-4 rounded-r-4xl hover:bg-[var(--active)] cursor-pointer select-none"
      >
        <i :class="item.icon" class="iconfont text-lg"></i>
        <span class="ml-2">{{ item.label }}</span>
      </div>
      <div v-else class="flex h-[30px] items-center">
        <span class="text-sm pl-3 text-gray-300">{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { aisdeMenuCommon } from '../../assets/js/static-data'
import { useRouter } from 'vue-router'

const router = useRouter()
const gotoRouter = (item) => {
  router.push(item.path)
}
</script>

<style scoped></style>
